<!DOCTYPE html>
<html lang="zh-CN">
<!--加载jquery-->
<script src="./axios.min.js"></script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传测试</title>
    <style>
        .container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        .upload-box {
            margin-bottom: 20px;
        }

        .progress-bar {
            height: 20px;
            background: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }

        .progress {
            width: 0%;
            height: 100%;
            background: #4CAF50;
            transition: width 0.3s ease;
        }

        .status {
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }

        .success {
            background: #dff0d8;
            color: #3c763d;
        }

        .error {
            background: #f2dede;
            color: #a94442;
        }

        button {
            padding: 10px 20px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background: #1976D2;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>文件上传测试</h2>
    <div class="upload-box">
        <input type="file" id="fileInput" accept=".fbx,.txt,.jpg" />
        <button onclick="uploadFile()">上传文件</button>
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        <div id="status" class="status"></div>
    </div>

    <div class="download-box">
        <h3>下载测试</h3>
        <input type="text" id="filename" placeholder="输入要下载的文件名" />
        <button onclick="downloadFile()">下载文件</button>
    </div>
</div>

<script>
  // 获取DOM元素
  const fileInput = document.getElementById('fileInput');
  const progressBar = document.getElementById('progress');
  const statusDiv = document.getElementById('status');

  // 上传文件函数
  async function uploadFile() {
    const file = fileInput.files[0];
    if (!file) {
      showStatus('请先选择文件', 'error');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('http://localhost:8089/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data; charset=utf-8'
        },
        onUploadProgress: progressEvent => {
          const percent = Math.round(
            (progressEvent.loaded / progressEvent.total) * 100
          );
          progressBar.style.width = percent + '%';
        }
      });

      showStatus(`上传成功！文件名：${response.data.filename}`, 'success');
      // 3秒后重置进度条
      setTimeout(() => {
        progressBar.style.width = '0%';
      }, 8089);
    } catch (error) {
      const msg = error.response ? error.response.data : error.message;
      showStatus(`上传失败：${msg}`, 'error');
      progressBar.style.width = '0%';
    }
  }

  // 下载文件函数
  function downloadFile() {
    const filename = document.getElementById('filename').value;
    if (!filename) {
      showStatus('请输入要下载的文件名', 'error');
      return;
    }

    window.open(`http://localhost:8089/download/${filename}`, '_blank');
  }

  // 状态显示函数
  function showStatus(message, type = 'info') {
    statusDiv.className = `status ${type}`;
    statusDiv.textContent = message;

    // 5秒后自动清除状态
    if (type !== 'info') {
      setTimeout(() => {
        statusDiv.className = 'status';
        statusDiv.textContent = '';
      }, 5000);
    }
  }

  // 文件选择时自动显示文件名
  fileInput.addEventListener('change', function(e) {
    if (this.files[0]) {
      showStatus(`已选择文件：${this.files[0].name}`, 'info');
    }
  });
</script>
</body>
</html>
